<template>
  <dv-border-box-10>
    <div class="biaogeneirong">
      <div class="dingbuxuanzekuang">
        <!-- 区 -->
        <span class="xuanzekuangqianwenzi"> {{ $store.state.quname }}:</span>
        <!-- 镇选择器 -->
        <zhenselect v-on:selectzhenfangfa="selectzhenfangfa"></zhenselect>
        <!-- 村选择器 -->
        <span class="xuanzekuangqianwenzi">村:</span>
        <cunselect v-on:selectcunfangfa="selectcunfangfa" ref="cun"></cunselect>
        <!-- 类别 -->
        <span class="xuanzekuangqianwenzi">类别:</span>
        <leibieselect
          v-on:selectleibiefangfa="selectleibiefangfa"
          :shujus="leibieshuju"
          ref="leibies"
        ></leibieselect>
      </div>
      <div class="biaoge">
        <ziyuanbiaoge
          ref="ziyuanbiaoge"
          v-on:setfenyetotal="setfenyetotal"
          :biaogeqingqiucanshu="biaogeqingqiucanshu"
          :fenyexinxi="fenyexinxi"
        ></ziyuanbiaoge>
      </div>
      <div class="fenye">
        <fenye
          :fenyexinxi="fenyexinxi"
          v-on:fenyegaibian="fenyegaibian"
        ></fenye>
      </div>
    </div>
  </dv-border-box-10>
</template>
<script>
import zhenselect from "../../components/selectitem/zhenselect";
import cunselect from "../../components/selectitem/cunselect";
import leibieselect from "../../components/selectitem/leibieselect";
import ziyuanbiaoge from "../../components/yemianbiaoge/ziyuanbiaoge";
import fenye from "../../components/fenye/fenye";

export default {
  data() {
    return {
      cishu: 0,
      selectzhen: "",
      selectcun: "", // 分页信息
      fenyexinxi: { total: 0, currentPage: 1, pagesize: 8 },
      biaogeqingqiucanshu: {
        selectzhen: "",
        selectcun: "",
        leibie: "",
      },
      leibieshuju: [],
    };
  },
  methods: {
    // 选择镇触发方法
    selectzhenfangfa(value) {
      this.selectzhen = value + "";
      this.$refs.cun.zhenxiadecun(value);
    },
    // 选择村后触发方法
    selectcunfangfa(value) {
      this.selectcun = value;
      this.selectleiing();
    },
    // 选择类别后触发方法
    selectleibiefangfa(value) {
      this.biaogeqingqiucanshu.selectcun = this.selectcun;
      this.biaogeqingqiucanshu.selectzhen = this.selectzhen;
      this.biaogeqingqiucanshu.leibie = value;
    },
    // 分页改变触发的方法
    fenyegaibian(value) {
      this.shuaxinbiaoge();
    },
    // 刷新表格
    shuaxinbiaoge() {
      this.$refs.ziyuanbiaoge.gengxin();
    },
    // 设置分页的total
    setfenyetotal(total) {
      this.fenyexinxi.total = total;
    },
    //查询资源类型
    selectleiing() {
      let params = new URLSearchParams();
      params.append("villageId", this.selectcun);
      this.$axios
        .post("/Leader/Funds/findResourseTypeByVillageId", params)
        .then((response) => {
          let leixing = [];
          response.data.data.data.forEach((item, index) => {
            leixing.push({
              label: item.name,
              value: item.id,
            });
          });
          this.$refs.leibies.genxinleibies(leixing);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {},
  watch: {
    biaogeqingqiucanshu: {
      handler: function () {
        this.cishu++;
        if (this.cishu >= 2) {
          this.shuaxinbiaoge();
        }
      },
      deep: true,
    },
  },
  components: {
    zhenselect,
    cunselect,
    leibieselect,
    ziyuanbiaoge,
    fenye,
  },
};
</script>

<style lang="less" scoped>
.biaogediv {
  height: 100%;
  width: 100%;
}
.biaogeneirong {
  height: 95%;
  width: 94%;
  padding: 2% 3%;
}
.dingbuxuanzekuang {
  display: flex;
  align-items: center;
}
.xuanzekuangqianwenzi {
  margin: 0 10px;
}
.biaoge {
  margin: 20px 0;
  height: 80%;
}
</style>